<template>
  <div class="dialogExpend">
    <div v-if="showModal"
         class="mask-main">
      <div class="mask-content">
        <el-table :data="gridData"
                  height="100%"
                  width="100%"
                  border>
          <el-table-column property="date"
                           label="日期"
                           width="150"></el-table-column>
          <el-table-column property="name"
                           label="姓名"
                           width="200"></el-table-column>
          <el-table-column property="address"
                           label="地址"></el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog class="pub_dialog outterDialog"
               title="收货地址"
               :close-on-press-escape="false"
               :close-on-click-modal="false"
               :visible.sync="dialogVisiable"
               width="80%"
               @close="close">
      <div class="topBox"></div>
      <div class="middleBox">
        <el-button type="text"
                   @click="screenFull">
          <i class="el-icon-search"></i>
        </el-button>
        <el-table :data="gridData"
                  height="85%"
                  border>
          <el-table-column property="date"
                           label="日期"
                           width="150"></el-table-column>
          <el-table-column property="name"
                           label="姓名"
                           width="200"></el-table-column>
          <el-table-column property="address"
                           label="地址"></el-table-column>
        </el-table>
      </div>
      <div class="bottomBox"></div>
    </el-dialog>
  </div>

</template>

<script>

export default {
  props: {
    visiable: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      showModal: false,
      dialogVisiable: true,
      gridData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
    };
  },
  watch: {},
  methods: {
    close () {
      this.$emit("func", false)
    },
    expand () {
      this.isActive = !this.isActive
    },
    screenFull () {
      this.showModal = true
    }
  },
  created () { },
  mounted () {
    //监听键盘按键事件
    let self = this;
    this.$nextTick(function () {
      document.addEventListener('keyup', function (e) {
        //此处填写你的业务逻辑即可
        if (e.keyCode == 27) {
          self.showModal = false
        }
      })
    })
  }
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.dialogExpend {
  .mask-main {
    // background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    .mask-content {
      width: 96%;
      height: 90%;
      overflow: auto;
      text-align: center;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.8);
      opacity: 1;
      .mask-item {
        &:first-of-type {
          font-size: 32px;
          padding-bottom: 10px;
        }
      }
    }
  }
  .animationname-enter-to,
  .animationname-leaver-to {
    animation: mymove 0.5s 1s linear;
  }
  .outterDialog {
    .topBox {
      height: 10%;
    }
    .middleBox {
      height: 70%;
      overflow: auto;
    }
    .bottomBox {
      height: 10%;
    }
  }
  .innerDialog {
    .middleBox {
      height: 100%;
      overflow: auto;
    }
  }
}
</style>